import { defineStore } from 'pinia'
import { ref, computed, reactive } from 'vue'
import { categoryData } from '@/views/comment/constant'

export const CleanSizeMap = {
  small: {
    width: 50,
    height: 65,
    desc: 'small',
    className: 'small-eraser'
  },
  middle: {
    width: 92,
    height: 120,
    desc: 'middle',
    className: 'middle-eraser'
  },
  big: {
    width: 142,
    height: 186,
    desc: 'big',
    className: 'big-eraser'
  }
}

export const useComment = defineStore(
  'Comment',
  () => {
    const currentClass = ref({
      class_id: '',
      class_name: ''
    })
    // 是否展示典型学生名字
    const isShowTypical = ref(false)
    // 选择对比的学生
    const studentIds = ref([])
    // 当前问题
    const currentQuestion = ref({
      question_id: '',
      questionIndex: '',
      score_rate: 0,
      question_detail: {},
      original_video: {}
    })

    // 题目列表
    const sortIndexList = ref([])
    const questionList = ref([])
    // 题目类型枚举
    const questionTypeEnum = computed(() => {
      return (categoryData || []).map(item => {
        return {
          name: item[1],
          id: item[0]
        }
      })
    })
    // 相似题
    const similar = reactive({
      isShow: false,
      selectedList: []
    })

    // 画板工具属性
    const drawingBoard = ref({
      penColor: '#F31D1D',
      penSize: 3,
      cleanSize: 'small'
    })

    // 将视频归属到题目
    const setVideoList = payload => {
      const list = payload || []
      for (let index = 0; index < questionList.value.length; index++) {
        const id = questionList.value[index].question_id
        const flag = list.find(item => item.question_id === id)?.url
        questionList.value[index].original_video = flag
          ? { videoUrl: flag }
          : {}
      }
    }

    const setSimilar = payload => {
      similar.isShow = payload.isShow
      similar.selectedList = payload.list
    }
    const setClass = payload => {
      currentClass.value = payload
    }
    const setQuestion = payload => {
      currentQuestion.value = { ...payload }
    }

    const setStudentIds = payload => {
      studentIds.value = payload
    }
    const setQuestionList = payload => {
      questionList.value = payload
    }
    const setShowTypical = payload => {
      isShowTypical.value = payload
    }

    const setDrawingBoard = payload => {
      drawingBoard.value = { ...drawingBoard.value, ...payload }
    }

    const resetData = () => {
      setQuestionList([])
      setClass({ class_id: '', class_name: '' })
      setQuestion({
        question_id: '',
        questionIndex: '',
        score_rate: 0,
        card_index: '',
        questionDetail: {},
        original_video: {}
      })
      setSimilar({
        isShow: false,
        list: []
      })
      setStudentIds([])
    }

    return {
      currentClass,
      setClass,
      currentQuestion,
      setQuestion,
      studentIds,
      setStudentIds,
      setShowTypical,
      isShowTypical,
      setQuestionList,
      questionList,
      sortIndexList,
      questionTypeEnum,
      similar,
      setSimilar,
      resetData,
      setDrawingBoard,
      drawingBoard,
      setVideoList
    }
  },
  {
    persist: {
      //开启持久化
      enabled: true,
      strategies: [
        {
          storage: localStorage,
          key: '1041_public_homework_assessment_store',
          paths: ['currentClass', 'currentQuestion', 'studentIds']
        }
      ]
    }
  }
)
